約 4,974,557 件
https://w.atwiki.jp/jiyuujin/pages/37.html
html5機能 (1) ファイルのキャッシュ機能「Application Cache」 Webブラウザのキャッシュ機能とは別に、Webサイト側で 指定したファイルを明示的にキャッシュする → サーバーとの通信ができない状況でもWebページを閲覧することが可能になる。 モバイル環境で利用するWebアプリケーションでは有効になる。 (2) WebブラウザにDBを持たせる機能、「Web Storage」や IndexedDB」と呼ばれる機能、JavaScriptを使って データを保存したり、引き出したりできる → 業務システムで使うマスターデータや画像ファイルなどを保存しておけば、 サーバーにアクセスしなくてもWebブラウザの画面上に必要なデータを表示できる (3) その他の機能 ・高速な双方向通信を実現する「WebSocket」 ・端末の位置情報データを扱う「Geolocation API」 (4) HTML5を扱うために ・HTMLのタグ ・JavaScript → サーバー側のアプリケーションを開発する技術だけでなく、 HTMLやJavaScriptにもある程度明るくないと厳しい (HTMLとCSS3の組み合わせが、Flashと比べ劣らなくなった) 従来のhtmlとどう違う? １．動画や音声、グラフィックの描画が可能になる動画を用いたい → video要素を用いる video width="640" height="360" preload="auto" poster="hoge.png" controls autoplay // WebM形式の動画 source src="hoge.webm" type= video/webm; codecs="vp8, vorbis" // ogv形式の動画 source src="hoge.ogv" type= video/ogg; codecs="theora, vorbis" // mp4形式の動画 source src="hoge.mp4" type= video/mp4; codecs="avc1.42E01E, mp4a.40.2" // video要素に非対応 p 動画を再生できません。 a href="hoge.html" 推奨環境はこちらから。 /a /p /video 音声を持ちたい → audio要素を用いる audio controls loop // ogg形式の音声 source src="hoge.ogg" // wav形式の音声 source src="hoge.wav" // mp3形式の音声 source src="hoge.mp3" // audio要素に非対応 p 音声を再生できません。 a href="hoge.html" 推奨環境はこちらから。 /a /p /audio グラフィックの描画 → canvas要素を用いる canvas id="canvas" width="640" height="360" /canvas script //描画コンテキストを取得 var canvas = document.getElementById( canvas ); if(canvas.getContext){ var context = canvas.getContext( 2d ); // 赤色で塗りつぶす context.fillStyle = rgb(255,0,0) ; // 左から20上から30の位置に、横幅64・高さ32の四角形を描く context.fillRect(20,30,64,36); } /script 位置情報を取得したいgeolocationをJavaScriptで用いる script window.addEventListener( load . function () { //geolocationが用いる事が出来るか判定 if(navigator.geolocation){ //現在地を定期的に監視する navigator.geolocation.watchPosition(update); } }, false); // 位置が?検出されたら緯度、経度を表示 function update(position){ // 緯度を取得 var lat = position.coords.latitude; // 経度を取得 var lng = position.coords.longitude; //経度・経度を書き出し document.write( 緯度： +lat+ 経度： +lng); } /script 大量のデータをクライアント側で保持したいLocalStorageをJavascrptで用いる script // localStorageに値を格納 localStorage.key = 保存したい値 ; // localStorageから値を取得 var hoge = localStorage.key; //「保存したい値」を書き出し document.write(hoge); /script
https://w.atwiki.jp/fieds_labo1/pages/57.html
html TOP 2008年11月現在、WEBブラウザはモダンブラウザ系へ移行しつつあります。 IE6、IE7、IE8β FFOX3 Opera9.6 Sfari3 Lunascape5 GoogleChrome まだ個人や企業での利用が多いIE6は標準モードも互換モードもモダンブラウザ系と実装が異なる部分があります。ショップモールの件もあるので、まだしばらく互換モードメインで作成したほうが良いだろうと考えていましたが、IE7とIE6の互換モードが完全に同じではないということみたいなので、XHTML記述に方針変更しました。 ?xml version="1.0" encoding="UTF-8" standalone="no"? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" xml lang="ja" lang="ja" IE6のみ互換モード。 ●参考サイト XML宣言 DOCTYPE宣言とレタリングモード表 「Internet Explorer6.0、7.0」におけるDOCTYPE 宣言・XML 宣言と互換モード・標準モードとの関係 DOCTYPE スイッチについての検証とまとめと一覧表 ●IE7の互換モードがIE6の互換モードと違うらしい ネストしたa hoverの扱いが違う？ Cross Browser Multi-Page Photograph Gallery IE7の互換モードで表示するとサムネイルにhoverした時に上位のhoverが解除されるようです。 【メモ】 フレームセット 7. フレーム フレームセットまるごと中央寄せしたい場合は、トップのフレームセットを縦３分割し、真ん中に中央寄せしたいフレームセットを入れる。 センタリングはできるけど、真ん中のフレームにスクロールバーがつく。（仕様） 回避するには、フレームセットをiframeに入れて、iframeの高さを調整するらしい。（未確認） CSSでw
https://w.atwiki.jp/api_programming/pages/187.html
下位ページ Content webフォントgoogleウェブフォント icomoon テキストの処理指定した幅から溢れ出した文字列の処理 指定した幅から溢れ出したものを改行させる場合の処理 ツールチップで表示させる http //coliss.com/articles/build-websites/operation/css/css-font-sizing-by-ire.html webフォント googleウェブフォント http //gigazine.net/news/20161020-google-fonts-japanese-early-access/ https //googlefonts.github.io/japanese/ icomoon 解説 http //univ.peraichi.com/20 テキストの処理 指定した幅から溢れ出した文字列の処理 基本は text-overflow で処理。"…"を表示させるには text-overflow ellipsis; overflow hidden; white-space nowrap; overflow と white-space も指定が必要か？chromeでは全部必要だった。 https //developer.mozilla.org/ja/docs/Web/CSS/text-overflow 指定した幅から溢れ出したものを改行させる場合の処理 text-wrap で処理 行の折り返しは word-break で処理（改行に対する禁則処理） https //developer.mozilla.org/ja/docs/Web/CSS/word-break http //www.htmq.com/css3/word-break.shtml 溢れ出したら表示させない場合は white-space nowrap を指定する。 https //developer.mozilla.org/ja/docs/Web/CSS/white-space overflow hidden (overflow-x, overflow-y) だと、途中で切れる（文字の上半分だけ見えていたりする） MDN-開発者向けのWeb技術-CSS-overflow HTMLクイック・リファレンス-スタイルシートリファレンス-overflow ツールチップで表示させる div title="..." ### /div グローバル属性として規定されているtitleが使用できる。 MDN グローバル属性 title
https://w.atwiki.jp/even_eko/pages/17.html
DOMを非表示 下のコードをタグの中に入れればOK! style="display none; " 例 div style="display none;" /div styleではcssのパラメータを変更できる。displayはcssのコマンドである。 audioタグ htmlファイル !DOCTYPE html html head title html5オーディオプレイヤー /title meta charset="UTF-8" script src="./html5_audio.js" /script /head body div id="audioZone" audio id="audio_8000" preload="auto" controls source src="audio/8000.wav" type="audio/wav" source src="audio/8000.mp3" type="audio/mp3" p ※ご利用のブラウザでは再生することができません。 /p /audio /div div id="musicZone" input id="startMusic" type="image" src="./img/q_pc_transmit_on.png" width="127px" height="58px" onclick="audioPlay(8000)"/ /div /body /html jsファイル function audioPlay(num) { var string = "audio/" + num + ".mp3"; var audio = new Audio(string); audio.play(); console.log(string); } これなら、Android2.2であるIS11Tでも動作した。 jsファイルにjQueryを使ったり、下のスクリプトを使ったりすると動作しなかった。 document.getElementById("audio_8000").play();
https://w.atwiki.jp/htmlwiki/pages/14.html
HTMLとは、HyperText Markup Languageの頭文字をとったものです。 HyperText ハイパーリンク（リンク.関連づけること）の機能を持つ文書のことを「ハイパーテキスト」と呼んでいます。 Markup コンピュータは、文書のレイアウトやフォントサイズだけでは、どこをどう解釈すべきなのか判断できません。 そのために、文書にコンピュータにも分かる印付けの方法です。 Language 言語。 htmlの構造について 基本、bodyの中に「ブロック要素」がいくつもある形になる。 「ブロック要素」の中でさらに詳しく説明を加えるために「インライン要素」というものを使う。 「ブロック要素」 = p ～ /p 「インライン要素」 = div ～ /div この形を必ず守ること。これ以外のソースコードは論外。
https://w.atwiki.jp/economicsln/pages/21.html
＜topics＞補充していく予定 game theory matching choice theory uncertainty WARP 消費者理論 Economics 603 larry ausubel http //www.chesnes.com/docs/umd_course_notes/noteswithgraphs/micro603_full.pdf 10.14M Econ2100 advanced microeconomics theory http //www.pitt.edu/~luca/ECON2100/ ApEc8001 Applied microeconomic analysis consumer theory http //faculty.apec.umn.edu/pglewwe/apec8001.html UCLA obara teaching economics 201A consumer http //www.econ.ucla.edu/iobara/201A.html stanford stein consumer theory 202n http //www.stanford.edu/~lstein/202n/ wisconsin-madison rapp home econ711 https //mywebspace.wisc.edu/mrapp/web/ kyoto mori http //www.kier.kyoto-u.ac.jp/~mori/teaching/lectures.html mechanism design algorithmic game theory cambridge 重い www.cambridge.org/journals/nisan/.../Nisan_Non-printable.pdf tilman borgers an introduction to theory of mechanism design http //www-personal.umich.edu/~tborgers/ hartline algorithmic md http //www.eecs.northwestern.edu/hartline/courses.html stanford jackson http //www.stanford.edu/~jacksonm/mechtheo.pdf CEU neeman a course on mechanism design http //www.econ.ceu.hu/download/Syllabi/AdvMicro2.pdf
https://w.atwiki.jp/tanken/pages/64.html
TITLE html - 2008年04月25日 (金) 15時07分52秒 TAG置き場 タグが使えないからコピーボックスに head title /title meta http-equiv="Content-Type" content="text/html; charset=shift_jis" / meta name="keywords" content=",," meta name="description" content="" meta name="robots" content="all" meta http-equiv="content-style-type" content="text/css" div style="font-size xx-small" div style="padding 2px;border-style none double double double;border-color #900000;border-width 1px;background-color #900000;color #006000;" div style="padding 2px;border-style none double none double;border-color #900000 #999900;border-width 10px;background-color #808000;width 220;" welcome /div /div div style="padding 2px;border-style double double none double;border-color #3030c0;border-width 1px;background-color #E0FFE0;width 290;" img src="" alt="" / br / /div div align="center" ◆ html? html/object
https://w.atwiki.jp/yn0510/pages/14.html
5/13 http //www.css-lecture.com/ をみて基本的なことを学ぶ。 ※ css で画像を表示する際などに path を指定するが、これはcssファイルから見た相対パスを入れなければいけない。 *********************************************************************************************** 5/16 単純にちょっとサイズが小さくないか？ [サイズ設計] 基本は 黄金比 1 1.618 白銀比 1.1.414 幅1,000pxの場合 黄金比 382 618 白銀比 414 586 になる。 ここでは、黄金比で作ってみる！ wrapper 1000px main 618px add 382px ※ width とはmarginを抜いた幅であることに注意する！ [ドットインストール HTMLの基礎] "favicon"なるもの(拡張子は.ico)がある。 これは url の左に表示される小さなアイコンで、ブックマークされた際にも表示されるのでぜひつけたい。 リストタグ ul Unorderd List (箇条書き) ol Orderd List (番号付き) li List Item テーブルタグ tr Table Row th Table Header td Table Data 汎用要素 div 汎用ブロックタグ span 汎用インラインタグ id 一意 class 複数 実体参照 Less Than ( ) Greater Than ( ) [ドットインストール CSSの基礎] セレクタの微妙な違い a, b aまたはb a b aの中のb a b aの子要素のb (直下でなくてはいけない、孫でもだめ) ab aのb (div#main, span.index など) 疑似クラス a hover などのこと。 クラス指定していなくても、何らかの挙動や特殊性から指定する事ができるもの。 セレクタの優先順位 !important をつけると、すべてを無視して最優先する。あまり使わないこと。 要素の位置指定 position プロパティを指定する relative デフォルトの指定と比較して、相対的に。 absolute 親要素と比較して、絶対的に。 fixed ブラウザの枠と比較して。 要素の重なり z-index で指定する。 重なった時に、z-index が小さい方が下に行く。
https://w.atwiki.jp/hinanj/pages/32.html
概要 HTMLの日(HTML事件)とは、避難J民がしたらばのバグを利用した悪ふざけによって引き起こされた悲劇である。当時の様子を再現したサイトが存在する。 2016年11月10日、ID E9oh880cのスレ立てにより、したらば掲示板のトップ画面でHTMLのメタタグがエスケープされてない事が判明。 (https //jbbs.shitaraba.net/bbs/read_archive.cgi/sports/40235/1478785073/) 簡単に言うとコードを仕込んだスレッドを立てることでサイトの一部レイアウトや仕様を変えられる状態にあったのだ。 翌日の11月11日、これを面白がった避難J民達が次々とコードを仕込みにスレッドを立て、その結果、避難Jのトップ画面は流れるおっちゃんが現れたり、原住民が高速移動したり、ボタンが設置されたり、文字がカラフルになったりクソみたいにデカくなったりと混沌状態になった。 ついにはID 1LISPl3sというクズがポップアップを無限に表示させるコードを仕込んだスレ( https //jbbs.shitaraba.net/bbs/read_archive.cgi/sports/40235/1478867945/ )を建て、避難Jはブラウザクラッシャーと化した。 したらば運営がこの問題に対策するまで、避難Jでは" "と" "がNGワードになった。 ID E9oh880c 11月10日にHTMLタグの不具合を発見した、パイオニアかつすべての元凶。 同年の7月21日にもHTMLタグスレ「あああ hr 」を建てていたようだが、その時は無効だった模様。 あああ hr https //jbbs.shitaraba.net/bbs/read_archive.cgi/sports/40235/1469084043/ 1 ： 風吹けば名無し＠なんJ避難所 ：2016/07/21(木) 15 54 03 AvAp8iLw ああああああああああああああああ font color=black size=7 【悲報】したらばのバグ悪化 /font https //jbbs.shitaraba.net/bbs/read_archive.cgi/sports/40235/1478785073/ 1 ： 風吹けば名無し＠なんJ避難所 ：2016/11/10(木) 22 37 53 E9oh880c 7月にテストした時は無効だったはずなんやけど 今日見たら有効になってたわ ID 1LISPl3s 無限ポップアップのコードを仕込んだスレ(https //jbbs.shitaraba.net/bbs/read_archive.cgi/sports/40235/1478867945/)を建てたカス。無限ポップアップ以外にもHTMLタグを含んだスレタイのスレを立てており、避難Jの管理人及び住人に多大な迷惑をかけた。 犯行理由については「よさげなタグ見つけたから」と供述している。 ID 1LISPl3sが謝罪するスレ https //jbbs.shitaraba.net/bbs/read_archive.cgi/sports/40235/1478869754/ 3 ： 風吹けば名無し＠なんJ避難所 ：2016/11/11(金) 22 21 18 1LISPl3s よさげなタグ見つけたから他板でテストスレ立てしたつもりだったんです許して 11 ： 風吹けば名無し＠なんJ避難所 ：2016/11/11(金) 23 25 21 1LISPl3s 笑いごとやないで HTMLの日を忘れない https //hinanj-uma.blog.jp/html.html 当時の雰囲気の再現したサイト。流石に無限ポップアップは無効化されている。
https://w.atwiki.jp/eyes_33/pages/50.html
要するに、XMLやJSONでのレスポンスですね。 単にモデルの結果をXMLで返すだけなら、renderで xmlを指定するだけでOK！ def get_xml books = Book.all render xml = books end JSONも同じ def get_json books = Book.all render json = books end 直接、文字列指定等もできるよ。 def get_xml_text render xml = error エラー発生 /error end def get_json_text render json = { data1 = データ1 , data2 = [ データ２－１ , データ２－２ ]} end んー、本だと日本語がそのままみたいだけど、ウチではエンコードされてる？まあいっか。 テンプレートを使ってXMLを書くなら、respond_toメソッドで！ まずはコントローラ(ontrollers/ctrl_controller.rb)に、以下のメソッドを書く def xml_erb @book = Book.find(params[ id]) respond_to do |format| format.xml end end で、以下のテンプレート(views/ctrl/xml_erb.xml.erb)を作って、 ?xml version="1.9" encoding="utf-8" ? book isbn=" %= @book.isbn % " title %= @book.title % /title price %= @book.price % /price publish %= @book.publish % /publish /book URL的には、「http //localhost 3000/ctrl/xml_erb/1.xml」にアクセスすれば、ERBを使ったXMLが返ると。 respond_toは、他にも「html/json/rss/atom/yaml/text/js/css/csv/ics」が定義済み この定義は、以下のRailsのライブラリで定義済み(これは環境によって違うので注意！) C \Ruby192\lib\ruby\gems\1.9.1\gems\actionpack-3.1.0\lib\action_dispatch\http\mime_types.rb で、自分でフォーマットを追加したい場合は、「config/initializers/mime_types.rb」に追加ね！ Mime Type.register "text/richtext", rtf と、いうか、このrespond_toって、どうやって動いているのか…。なので、ちょっと調べてみた。 おおー、Rails3だと、respond_withでテンプレート毎の記述が省略できるみたい もともとこう書いてあったところを、 def index @books = Book.all respond_to do |format| format.html # index.html.erb format.json { render json @books } end end こういうふうに、書けるみたい！イカス！ respond_to html, json def index @books = Book.all respond_with @books end XML出力時に、Builderを使ってRuby書式でも書けるんだ！ まず、こんなファイル(views/ctrl/xml_erb.xml.builder)を作って、 xml.book( isbn = @book.isbn) do xml.title(@book.title) xml.price(@book.price) xml.publish(@book.publish) end さっき作った「views/ctrl/xml_erb.xml.erb」を別名に変えてから、 基本、erbが優先されるから、別名に変えないとBuilderが有効にならないんだねー 「http //localhost 3000/ctrl/xml_erb/1.xml」にアクセスすれば、Builderを使ったXMLが返ると。 まあ、Builderは、単に「xml.エレメント」みたいアクセスするRubyスクリプトなんで、いろいろできそうだね。 ビューヘルパーとかを使うと、XML出力の整形も簡単！この例はatom出力の例だね！ まずは、atom形式の返却を、コントローラ(controllers/books_controller.rb)に追加 respond_to html, json, atom で、こんなBuilderのビューファイル(views/books/index.atom.builder)を作成して、 atom_feed do |feed| feed.title( 最新書籍情報 ) feed.updated(@books.last.created_at) @books.each do |book| feed.entry(book, url = "http //www.hmv.co.jp/search/?target=BOOKSISBN catnum=#{book.isbn}", published = book.published, updated = book.published) do |entry| entry.title(book.title) entry.content("#{book.publish}刊 #{book.price}円") entry.author do |author| author.name(book.authors[0].name) end end end end FireFoxで、「http //localhost 3000/books.atom」にアクセスすれば、atomが整形されてきれいに見れたし、URLクリックで検索もOK ここでは、atom_feedメソッドがビューヘルパーで、その下にtitle/updated/entryとかがある感じね。 -